<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
    <style>
        .box-card {
            width: 400px;
            position: absolute;
            left: 3em;
            top: 50px;
            z-index: 1;
        }
        .clearfix {
            font-size: 18px;
        }
        .el-card__header {
            padding: 10px 20px;
            background-color: #f5f5f5;
        }
        .close-btn {
            float: right; 
            padding: 0; 
            font-size: 25px;
            color: #666666;
        }
        .modal-footer {
            display: flex;
            justify-content: end;
        }
        .el-form-item {
            display: flex;
        }
        .el-form-item__content {
            display: flex;
            align-items: center;
            margin-left: 0 !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="selectMode('MeasurePolylineDistance')">线段测量</el-button>
            <el-button type="info" @click="selectMode('MeasurePolygonArea')">面测量</el-button>
            <el-button type="info" @click="selectMode('MeasurePointPointDistance')">两点直线</el-button>
            <el-button type="info" @click="selectMode('MeasureFaceFaceAngle')">面面角度</el-button>
            <el-button type="info" @click="handleCancel">取消测量</el-button>
            <el-button type="info" @click="showCard = true">测量设置</el-button>
        </div>
        <el-card class="box-card" v-show="showCard">
            <div slot="header" class="clearfix">
              <span>测量设置</span>
              <el-button class="close-btn" type="text" @click="hideModel('form')">×</el-button>
            </div>
            <div class="card-container">
                <el-form 
                    ref="form" 
                    :model="formValues" 
                    label-width="90px"
                >
                    <el-form-item label="箭头：">
                        <el-radio-group v-model="formValues.arrow">
                            <el-radio :label="true">有</el-radio>
                            <el-radio :label="false">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="线面颜色：">
                        <el-color-picker v-model="formValues.lineColor"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="线条宽度：">
                        <el-input-number v-model="formValues.lineWidth" :min="1" :max="20"></el-input-number>
                    </el-form-item>
                    <el-form-item label="量测精度：">
                        <el-input-number v-model="formValues.accuracy" :min="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="量测单位：">
                        <el-radio-group v-model="formValues.unit">
                            <el-radio label="cm">cm</el-radio>
                            <el-radio label="m">m</el-radio>
                            <el-radio label="km">km</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="结束方式：">
                        <el-radio-group v-model="formValues.endMode">
                            <el-radio label="1">双击</el-radio>
                            <el-radio label="2">右键</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="modal-footer">
                    <el-button size="small" @click="resetToDefault">恢复默认设置</el-button>
                    <!-- <el-button size="small" type="primary" @click="handleSubmit">确认</el-button> -->
                </div>
            </div>
        </el-card>
        <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
    </div>
    <script id="viewerStartup" type="module">
        const vm = new Vue({
            el: '#app',
            data: {
                bimViewer: null,
                showCard: false,
                formValues: {
                    arrow: true,
                    lineColor: '#ff3013',
                    lineWidth: 2,
                    accuracy: 20,
                    unit: 'm',
                    endMode: '2'
                }
            },
            mounted () {
                this.bimViewerFn()
            },
            watch: {
                formValues: {
                    handler: function (val, oldVal) {
                        console.log(val.lineColor);
                        this.setLineColor(val.lineColor)
                     },
                    deep: true,
                    immediate: true
                },
            },
            methods: {
                // 初始化模型
                bimViewerFn() {
                    this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                },
                // 激活测量
                selectMode(mode) {
                    const { lineWidth, lineColor, endMode, arrow } = this.formValues
                    console.log(mode, lineWidth, lineColor, endMode, arrow, '选了啥？');
                    this.bimViewer.activationMeasure(mode, {
                        lineWidth: lineWidth,
                        color: lineColor,
                        finishMode: endMode,
                        hasArrow: arrow
                    })
                },
                // 设置线面颜色
                setLineColor(hex) {
                    const red = Number('0x' + hex.substring(1, 3));
                    const green = Number('0x' + hex.substring(3, 5));
                    const blue = Number('0x' + hex.substring(5, 7));
                    this.formValues.lineColor = {r:red, g:green, b:blue};
                    console.log(this.formValues, 'formValues');
                },
                // handleSubmit() {

                // },
                // 恢复默认设置
                resetToDefault() {
                   this.formValues = {
                        arrow: true,
                        lineColor: '#ff3013',
                        lineWidth: 2,
                        accuracy: 20,
                        unit: 'm',
                        endMode: '2'
                    }
                },
                // 取消测量
                handleCancel() {
                    this.bimViewer.deactiveMeasure("MeasurePolylineDistance"); // 线段测量
                    this.bimViewer.deactiveMeasure("MeasurePolygonArea"); // 面测量
                    this.bimViewer.deactiveMeasure("MeasurePointPointDistance"); // 两点直线
                    this.bimViewer.deactiveMeasure("MeasureFaceFaceAngle"); // 面面角度
                },
                hideModel(formName) {
                    this.showCard = false
                    this.$refs[formName].resetFields();
                }
            },
        })
        
    </script>
</body>
</html>
